<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer
      :title="ConfigTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="70%"
      :wrapperClosable="false"
    >
      <div class="layout">
        <el-form
          label-position="left"
          class="formbox"
          :inline="true"
          size="small"
          ref="searchForm"
          :model="searchForm"
        >
          <div class="configform-box">
            <el-form-item label="名称：" class="form-box-item">
              <el-input
                v-model="searchForm.CouponName"
                placeholder="请输入优惠券名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="类型：" class="form-box-item">
              <el-select
                v-model="searchForm.type"
                placeholder="请选择优惠券类型"
                clearable
              >
                <el-option
                  v-for="item in [
                    { value: 1, label: '满减券' },
                    { value: 2, label: '折扣券' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="领取方式：" class="form-box-item">
              <el-select
                v-model="searchForm.get_way"
                placeholder="请选择领取方式"
                clearable
              >
                <el-option
                  v-for="item in [
                    { value: 1, label: '手动领取' },
                    { value: 2, label: '后台发放' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态：" class="form-box-item">
              <el-select
                v-model="searchForm.status"
                placeholder="请选择优惠券状态"
                clearable
              >
                <el-option
                  v-for="item in [
                    { value: 1, label: '上架' },
                    { value: 2, label: '下架' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="height: 30px"
                @click="getListWay()"
                >查询</el-button
              >
              <el-button style="height: 30px" @click="resetForm('searchForm')"
                >重置</el-button
              >
            </el-form-item>
          </div>
          <div class="configform-box">
            <div>
              <el-table
                ref="singleTable"
                :data="CouponList"
                :v-loading="loading"
                highlight-current-row
                @current-change="handleCurrentChange"
                :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }"
                style="width: 100%"
              >
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column
                  prop="name"
                  label="名称"
                  width="150"
                ></el-table-column>
                <el-table-column prop="quota" label="面值"></el-table-column>
                <el-table-column
                  prop="residue_limit"
                  label="剩余数量"
                ></el-table-column>
                <el-table-column prop="type" label="类型" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.type == 1" size="mini"
                      >满减劵</el-tag
                    >
                    <el-tag v-else size="mini">折扣劵</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="get_way" label="领取方式" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.get_way == 1" size="mini"
                      >手动领取</el-tag
                    >
                    <el-tag v-else size="mini">后台发放</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="use_type"
                  label="适用类型"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.use_type == 1" size="mini"
                      >通用劵</el-tag
                    >
                    <el-tag v-if="scope.row.use_type == 2" size="mini"
                      >指定分类</el-tag
                    >
                    <el-tag v-if="scope.row.use_type == 3" size="mini"
                      >指定品牌</el-tag
                    >
                    <el-tag v-if="scope.row.use_type == 4" size="mini"
                      >指定商品</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="is_limit"
                  label="是否限量"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.is_limit == 2" size="mini"
                      >不限量</el-tag
                    >
                    <el-tag
                      type="warning"
                      v-if="scope.row.is_limit == 1"
                      size="mini"
                      >{{ scope.row.coupon_limit }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="use_shop"
                  label="适用门店"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.use_shop == 1" size="mini"
                      >全部门店</el-tag
                    >
                    <el-tag v-if="scope.row.use_shop == 2" size="mini"
                      >部分门店</el-tag
                    >
                    <el-tag v-if="scope.row.use_shop == 3" size="mini"
                      >仅平台使用</el-tag
                    >
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="searchForm.page"
                :limit.sync="searchForm.count"
                @pagination="getListWay"
              />
            </div>
          </div>
        </el-form>

        <div class="button-box">
          <el-button @click="select()" type="primary" class="next-button"
            >确定</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getCouponList } from "@/api/coupon/index";
export default {
  name: "detail",
  props: ["ConfigTitle"],
  components: {},

  data() {
    return {
      drawer: true,
      // 筛选条件
      searchForm: {
        type: "",
        get_way: "",
        status: "",
        CouponName: "",
        page: 1,
        count: 10,
      },
      CouponList: [],
      loading: false,
      total: 0, // 筛选之后的列表总条数
      currentRow: {},
    };
  },
  mounted() {
    this.getListWay();
  },
  methods: {
    // 获取优惠券列表
    getListWay(id) {
      this.loading = true;
      getCouponList(this.searchForm)
        .then((res) => {
          this.CouponList = res.data.list;
          this.loading = false;
          if (!isNaN(id)) {
            this.couponIdWay(id);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 关闭抽屉
    closedinvitation() {
      this.$parent.closeConfig();
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getListWay();
    },
    //获取选中行
    handleCurrentChange(row) {
      this.currentRow = row;
    },
    couponIdWay(id) {
      this.$nextTick(() => {
        this.CouponList.forEach((item) => {
          if (item.id == id) {
            this.$refs.singleTable.setCurrentRow(item);
          }
        });
      });
    },
    select() {
      if (Object.keys(this.currentRow).length === 0) {
        this.$message("请选择优惠券！");
      } else {
        this.$parent.closeConfig(this.currentRow.id, this.currentRow.name);
      }
    },
  },
};
</script>
<style lang="scss">
.drawer-layout {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .configform-box {
    .form-box-item {
      .el-form-item__label {
        font-size: 12px;
        font-weight: 500;
        width: 80px;
      }

      .el-input {
        width: 200px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.configform-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }
}

.button-box {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e2e2e2;
  text-align: center;
  line-height: 60px;

  .next-button {
    width: 120px;
  }
}

.formbox {
  margin-bottom: 80px;
}
</style>